import * as echarts from 'echarts';
import {useRef, useEffect} from 'react'


function echartInit(node, title, xData, sData, sName){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(node);
    // 绘制图表
    myChart.setOption({
    title: {
        text: title
    },
    tooltip: {},
    xAxis: {
        data: xData
    },
    yAxis: {},
    series: [
        {
        name: sName ? sName : null,
        type: 'bar',
        data: sData
        }
    ]
    });
}


function EchartBar({style, title, xData, sData, sName}){
    const nodeRef = useRef(null)
    useEffect(() => {
        echartInit(nodeRef.current, title, xData, sData, sName)
    }, [title, xData, sData, sName])

    return(
        <div>
            <div ref={nodeRef} style = {style}></div>
        </div>
    )
}

export default EchartBar